{% raw %}
    {% extends "base.html" %}
    {% block head %}
        <title>Sign up -
        {% endraw -%}
    {{ cookiecutter.project_name }}{%- raw -%}</title>
    <meta name="robots" content="noindex,nofollow">
{% endblock %}
{% block body %}
    <div class="2xl:container mx-auto px-4 md:px-16 py-5 md:py-10">
        <main class="mx-auto max-w-md rounded border-2 border-[#FFC894] bg-[#FFE2C7] py-10 px-10">
            <h2 class="mb-10 tracking-tighter text-center text-3xl font-bold text-gray-900">Register to get started.</h2>
            <div id="g_id_onload"
                data-client_id="{{ google_oauth_client_id }}"
                data-context="signup"
                data-ux_mode="redirect"
                data-login_uri="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-auth:signin-with-google' %}?next=/register/"
                data-auto_select="true"
                data-auto_prompt="true"
                data-itp_support="true">
            </div>
            <div class="g_id_signin"
                data-type="standard"
                data-size="large"
                data-theme="filled_blue"
                data-text="signup_with"
                data-shape="rectangular"
                data-logo_alignment="left">
            </div>
            
            <div class="relative flex mt-2 py-3 items-center">
                <div class="flex-grow border-t border-gray-400"></div>
                <span class="flex-shrink mx-4 text-sm text-gray-700">or </span>
                <div class="flex-grow border-t border-gray-400"></div>
            </div>

            <h2 class="mb-2 text-center text-lg font-bold text-gray-900">Sign up with your email address</h2>
            <form action="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-auth:register' %}"
                  method="post"
                  class="mt-10 grid grid-cols-1 gap-y-3">
                {% csrf_token %}
                {{ form }}
                <div class="mt-5">
                    <input type="submit"
                           value="Get started"
                           class="w-full btn btn-primary btn-medium"/>
                </div>
            </form>
            <div>
                <p class="mt-4 text-center text-base text-gray-900">
                    Already have an account? <a href="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-auth:login' %}"
    class="text-blue-600 hover:text-gray-800 font-semibold underline">Log in</a>
                </p>
            </div>
        </main>
    </div>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
{% endblock %}
{% endraw %}